<template>
  <div class="cart">
    <div class="content">
      <div class="step-box">
        <div class="left">
          <span class="img"></span>
          <span class="text">购物车</span>
        </div>
        <div class="steps">
          <div class="item active">
            <div class="number">step 01.</div>
            <div class="text">选择购买商品</div>
          </div>
          <div class="item">
            <div class="number">step 02.</div>
            <div class="text">确认订单信息</div>
          </div>
          <div class="item">
            <div class="number">step 03.</div>
            <div class="text">支付完成订单</div>
          </div>
        </div>
      </div>
      <div class="cart-table">
        <el-table
          ref="cartTableRef"
          style="width: 100%"
          :data="cartStore.shopcartInfo.items"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="35" align="center" />
          <el-table-column label="图片" width="90">
            <template v-slot="scope">
              <div class="tab-img">
                <a @click="toDetail(scope.row)" class="img-box">
                  <img
                    :src="
                      scope.row.productId
                        ? scope.row.productId.productImage
                        : scope.row.charProductId.productImage
                    "
                    alt=""
                  />
                </a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="商品"
            width="380"
            align="center"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <div class="tab-name">
                <a @click="toDetail(scope.row)" class="name">{{
                  scope.row.productId
                    ? scope.row.productId.description
                    : scope.row.charProductId.description
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="175" align="center">
            <template v-slot="scope">
              ￥{{
                scope.row.productId
                  ? scope.row.productId.price
                  : scope.row.charProductId.price
              }}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="225" align="center">
            <template v-slot="scope">
              <div class="tab-number">
                <el-button
                  class="minus"
                  circle
                  @click="updateCart(-1, scope.row)"
                  :disabled="scope.row.quantity == 1"
                  >-</el-button
                >
                <input
                  type="text"
                  readonly="true"
                  class="number"
                  :value="scope.row.quantity"
                />
                <el-button class="plus" circle @click="updateCart(1, scope.row)"
                  >+</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="小计" width="80" align="center">
            <template v-slot="scope">
              <div class="tab-total">￥{{ scope.row.price.toFixed(2) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <div class="tab-action">
                <a href="javascript:;" class="action-a collect">移动到收藏夹</a>
                <a
                  href="javascript:;"
                  class="action-a del"
                  @click="deleteCart(scope.row)"
                  >删除</a
                >
              </div>
            </template>
          </el-table-column>
          <template #empty>
            <div class="empty">
              <div class="img">
                <img src="./images/cart-empty.png" alt="" />
              </div>
              <div class="action">
                <div class="text">您的购物车空空如也</div>
                <a href="/" class="btn">去购物</a>
              </div>
            </div>
          </template>
        </el-table>
      </div>
      <div class="cart-bottom">
        <div class="total-box">
          <a href="javascript:;" class="del-selected" @click="deleteCheckedCart"
            >删除选中商品</a
          >
        </div>
        <div class="settlement-box">
          <div class="amount">
            已选<span class="number">{{ cartStore.count }}</span
            >件商品
          </div>
          <div class="price-box">
            <div class="total-price">
              总价
              <span class="text">￥{{ cartStore.total.toFixed(2) }}</span>
            </div>
          </div>
          <a href="javascript:;" class="btn" @click="toSubmitOrder">结算</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="shopCart">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import useUserStore from "@/stores/modules/user";
import useShopCartStore from "@/stores/modules/shopcart";
import useTradeStore from "@/stores/modules/trade";

let userStore = useUserStore();
let cartStore = useShopCartStore();
let tradeStore = useTradeStore();
let userId = userStore.user._id;

//获取路由器对象
let $router = useRouter();
let $route = useRoute();

// 删除产品的列表
let productIds = ref<any>([]);
let charProductIds = ref<any>([]);
let choseProdcutData = ref<any>([]);

let cartTableRef = ref<any>();

const handleSelectionChange = async (val: any) => {
  choseProdcutData.value = val;
  let data = choseProdcutData.value.map((item: any) => ({
    productId: item.productId ? item.productId._id : "",
    charProductId: item.charProductId ? item.charProductId._id : "",
  }));
  productIds.value = [];
  charProductIds.value = [];
  data.forEach((item: any) => {
    if (item.productId) {
      productIds.value.push(item.productId);
    } else {
      charProductIds.value.push(item.charProductId);
    }
  });
  let totalData = {
    userId,
    productIds: productIds.value,
    charProductIds: charProductIds.value,
  };
  await cartStore.getTotalMoney(totalData);
};

// 删除购物车商品
const deleteCart = async (row: any) => {
  if (row.productId) {
    let data = { userId, productIds: [row.productId._id], charProductIds: [] };
    await cartStore.deleteShopCart(data);
  } else {
    let data = {
      userId,
      productIds: [],
      charProductIds: [row.charProductId._id],
    };
    await cartStore.deleteShopCart(data);
  }
};

// 删除选中商品
const deleteCheckedCart = async () => {
  if (productIds.value.length == 0 && charProductIds.value.length == 0) {
    ElMessage.warning("请勾选要删除的商品~");
    return;
  } else {
    let data = {
      userId,
      productIds: productIds.value,
      charProductIds: charProductIds.value,
    };
    await cartStore.deleteCheckedCart(data);
  }
};

// 修改购物车商品数量
const updateCart = async (count: number, row: any) => {
  if (row.productId) {
    let data = {
      userId,
      productId: row.productId._id,
      charProductId: null,
      count,
    };
    await cartStore.updateCart(data);
  } else {
    let data = {
      userId,
      productId: null,
      charProductId: row.charProductId._id,
      count,
    };
    await cartStore.updateCart(data);
  }
};

// 点击结算按钮的回调
const toSubmitOrder = async () => {
  if (choseProdcutData.value.length == 0) {
    ElMessage.error("请至少选择一件商品");
    return;
  } else {
    let data = {
      userId,
      productIds: productIds.value,
      charProductIds: charProductIds.value,
    };
    await tradeStore.tradeOrder(data);
    $router.push("/submit-order");
  }
};

// 跳转到详情页
const toDetail = (row: any) => {
  if (row.productId) {
    $router.push({
      path: `/detail/${row.productId._id}`,
      query: { product: 1 },
    });
  } else {
    $router.push({
      path: `/detail/${row.charProductId._id}`,
      query: { charProduct: 1 },
    });
  }
};

onMounted(async () => {
  await cartStore.getCartList(userId);
});
</script>

<style lang="scss" scoped>
.cart {
  min-height: 535px;
  padding-bottom: 40px;
  background-color: #f8f8f8;
  .content {
    width: 1200px;
    margin: auto;
    .step-box {
      display: flex;
      height: 70px;
      padding: 0 20px 7px;
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.05);
      margin-bottom: 30px;
      border-bottom: 2px solid #4caf50;
      .left {
        flex: 1;
        margin-top: 16px;
        .img {
          background: url(../../assets/icons.d354c61.png) no-repeat 0 -249px;
          display: inline-block;
          vertical-align: top;
          height: 38px;
          width: 38px;
        }
        .text {
          display: inline-block;
          vertical-align: top;
          height: 38px;
          line-height: 38px;
          font-size: 15px;
          font-weight: 600;
        }
      }
      .steps {
        display: flex;
        .item {
          padding-left: 90px;
          margin-left: 40px;
          position: relative;
          background: url(./images/icons.d354c61.png) no-repeat 0 -292px;
          .number {
            height: 20px;
            line-height: 20px;
            margin-top: 12px;
            color: #999;
            font-family: math;
          }
          .text {
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            color: #999;
          }
        }
        .item:first-child {
          background: none;
        }
        .active {
          .number {
            color: #000;
          }
          .text {
            color: #000;
          }
        }
      }
    }
    .cart-table {
      .tab-img {
        display: flex;
        width: 90px;
        .img-box {
          display: block;
          width: 80px;
          height: 80px;
          font-size: 0;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
            vertical-align: top;
          }
        }
      }
      .tab-name {
        line-height: 20px;
        font-size: 12px;
        a {
          cursor: pointer;
          text-decoration: none;
        }
        a:hover {
          color: #4caf50;
        }
      }
      .tab-number {
        .number {
          border: 0;
          width: 40px;
          height: 30px;
          text-align: center;
          font-family: arial;
          vertical-align: top;
          background: transparent;
        }
      }
      .tab-total {
        color: #e1251b;
        font-weight: 600;
        font-family: verdana;
        font-size: 12px;
      }
      .tab-action {
        font-size: 12px;
        .action-a {
          display: block;
          transition: all 0.2s;
        }
        .collect {
          color: #000;
          text-decoration: none;
        }
        .del {
          padding-right: 47px;
          color: #999;
          text-decoration: none;
          &:hover {
            color: #4caf50;
          }
        }
      }
    }
    .cart-bottom {
      display: flex;
      border: 1px solid #eee;
      margin-top: 30px;
      align-items: center;
      .total-box {
        flex: 1;
        display: flex;
        .check-all {
          font-size: 12px;
          margin-left: 13px;
          .checkbox {
            width: 12px;
            height: 12px;
            margin: 0;
            display: inline-block;
            vertical-align: top;
            position: relative;
            outline: none;
            border: none;
            box-sizing: border-box;
            cursor: pointer;
            box-shadow: none;
          }
          .text {
            display: inline-block;
            vertical-align: top;
            margin-left: 5px;
          }
        }
        .del-selected {
          margin-left: 20px;
          line-height: 14px;
          display: inline-block;
          vertical-align: top;
          text-decoration: none;
          color: #000;
          font-size: 12px;
          transition: all 0.2s;
          &:hover {
            color: #4caf50;
          }
        }
      }
      .settlement-box {
        display: flex;
        position: relative;
        padding-right: 93px;
        font-size: 12px;
        .amount {
          line-height: 20px;
          margin-top: 6px;
          .number {
            font-family: verdana;
            color: #e1251b;
            margin: 0 3px;
          }
        }
        .price-box {
          height: 44px;
          line-height: 20px;
          margin: 6px 15px 0;
          .total-price {
            .text {
              font-size: 16px;
              color: #e1251b;
              font-family: verdana;
              font-weight: 700;
              display: inline-block;
              vertical-align: top;
            }
          }
        }
        .btn {
          position: absolute;
          top: -1px;
          right: -1px;
          display: block;
          width: 94px;
          height: 52px;
          line-height: 52px;
          text-decoration: none;
          color: #fff;
          text-align: center;
          font-size: 16px;
          background: #e1251b;
          font-weight: 600;
        }
      }
    }
    .empty {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 50px 0;
      width: 100%;
      img {
        width: 250px;
        height: 200px;
        font-size: 0;
      }
      .action {
        margin-left: 10px;
        .text {
          color: #999;
          font-size: 14px;
          margin-top: 40px;
        }
        .btn {
          padding: 7px 20px;
          background: #4caf50;
          border-radius: 30px;
          color: #fff;
          margin-top: 20px;
          text-decoration: none;
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
}
</style>
